<template>
  <div class="designer-wrap">
    <div class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">流程配置</el-menu-item>
        <el-menu-item index="2">流程表单</el-menu-item>
        <el-menu-item index="3">流程设计</el-menu-item>
        <!-- <el-menu-item index="4">更多配置</el-menu-item> -->
      </el-menu>
      <div class="publish">
        <el-button size="mini" type="primary" @click="publish">发布</el-button>
      </div>
    </div>
    <div class="content">
      <BasicInfo
        :navable="navable"
        :readable="readable"
        v-show="activeIndex == 1"
      ></BasicInfo>

      <formDesigner :list="formData" v-show="activeIndex == 2" />
      
      <FlowNode
        :navable="navable"
        :readable="readable"
        v-show="activeIndex == 3"
      ></FlowNode>

      <el-dialog v-model="dialogTableVisible" title="Shipping address">
        {{ nodeData }}
      </el-dialog>
    </div>
  </div>
</template>
<script setup name="FlowDesign">
import testHook from "../mixins/flowhook";
import { getStartNode } from "../../utils/nodeUtil";
//import formDesigner from "../form/formDesigner.vue";
import formDesigner from "./FlowForm/FormIndex.vue";
import BasicInfo from "./BasicInfo/index.vue";
import FlowNode from "./FlowNode/index.vue";
import {
  reactive,
  ref,
  createApp,
  
  computed,
  onMounted,
  toRefs,
  watch,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const activeIndex = ref("1");
//const formData = ref("");
const dialogTableVisible = ref(false);

//注册组件
// app.component({
//   FlowMap, FlowZoom, FlowNav, FlowHelper, FlowTips, FlowStartNode, FlowNode, FlowEndNode
// });

//接收父组件传过来的值
const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return getStartNode();
    },
  },
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});
//import mockApi from "../../api/mockApi.js";
import { getFlowTemplate } from "../../api/flow.js"
import { addFlowTemplate } from "../../api/flow.js";

const { node, navable, readable } = toRefs(props);

const initData = () => {
  let data = {};
  getFlowTemplate()
    .then((res) => {
      if (res.code === "0") {
        //   data.formData = res.data.formData;
        //   data.baseSetting = res.data.baseSetting;
        //   data.node =  res.data.node;
        // console.log("-------------------->",JSON.stringify(data));
         store.dispatch("process/loadDesign", res.data);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  // data.formData =
  //   '{\n    "config": {\n        "version": "0.5",\n        "formRef": "elForm",\n        "formModel": "form",\n        "rules": "rules",\n        "size": "default",\n        "labelPosition": "right",\n        "labelWidth": 80,\n        "formRules": "rules",\n        "gutter": 15,\n        "disabled": false,\n        "dynamicTableAllowed": true\n    },\n    "list": [\n        {\n            "id": "fd_1694187763213",\n            "key": "fd_1694187763213",\n            "type": "input",\n            "name": "单行文本",\n            "icon": "input",\n            "viewType": "text",\n            "options": {\n                "config": true,\n                "showLabel": true,\n                "placeholder": "请输入文本",\n                "required": false,\n                "span": 24,\n                "width": "100%",\n                "clearable": true,\n                "disabled": false,\n                "readonly": false,\n                "status": "normal",\n                "prefix-icon": "",\n                "suffix-icon": "",\n                "value": "",\n                "rulesType": "default",\n                "prepend": "",\n                "append": "",\n                "layout": "colItem"\n            },\n            "rules": []\n        }\n    ]\n}';
  console.log("data-------------------->", JSON.stringify(data));
  //store.dispatch("process/loadDesign", data);
};

initData();

const emit = defineEmits(["publish"]);
//定义一个数据
const zoomValue = ref(100);
//reactive 主要是用来处理复杂的数据类型，比如对象和数组。
//所以当你传递的是非对象时，页面不会发生响应
//错误示范
// let error = reactive(err)
//正确示范
// let right = reactive({
// 	name:"张三"
// })
// //修改值得时候
// right.name = "李四"

//  vue2 => computed
const zoomStyle = computed(() => {
  return zoomValue.value / 100;
});

const nodeData = computed(() => {
  return store.state.process.node;
});

const formData = computed(() => {
  console.log("-----------------formData-------------->",store.state.process.formData)
  return store.state.process.formData;
});

const baseSetting = computed(() => {
  return store.state.process.baseSetting;
});

watch(
  nodeData,
  (newValue, oldValue) => {
    console.log("nodeData---------->改变了");
    console.log("nodeData", newValue);
  },
  { immediate: true }
);

//mounted => onMounted
// onMounted(() => {
//   store.dispatch("process/setNode", node.value);
// });

// onMounted(() => {
//   console.log("formData---------->",store.state.selectFormItem)
//   formData.value = store.state.selectFormItem;
// })

// getData() {
//         return this.nodeData;
//       },
const getData = () => {
  return nodeData.value;
};

const toReturn = () => {};

const publish = () => {
  //dialogTableVisible.value = true;
  //baseSetting;
  let data = {
    name:baseSetting.value.flowName,
    remark:baseSetting.value.description,
    imgUrl:baseSetting.value.imageUrl,
    groupId:baseSetting.value.flowGroup,
    nodeData:JSON.stringify(nodeData.value),
    baseSetting:JSON.stringify(baseSetting.value),
    formData:JSON.stringify(formData.value)
  }
    console.log("提交数据结束------------res>", JSON.stringify(data.nodeData));
  // addFlowTemplate(data).then(res=>{
  //   console.log("提交数据结束------------res>", JSON.stringify(res));
  // })
  // emit("publish", nodeData.value);
};

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
  activeIndex.value = key;
};
</script>

<style lang="less" scoped>
.header {
  min-width: 980px;
  position: relative;

  .el-menu {
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .publish {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1000;

    i {
      margin-right: 6px;
    }

    button {
      border-radius: 15px;
    }
  }
}
</style>


